import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
const LeftBottom: React.FC = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "14:26:02", "14:28:02", "14:30:02", "14:32:02"],
            ["运动区", 1511, 2470, 2101, 1565],
            ["宿舍区", 1563, 1327, 2319, 1900],
            ["教学区", 1000, 900, 950, 500],
            ["吸烟区", 1008, 1230, 864, 928],
            ["干饭区", 1974, 2000, 1947, 1508],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
      return () => {
        window.removeEventListener("resize", () => {
          chartInstance.resize();
        });
        chartInstance.dispose();
      };
    }
  }, []);
  return <div ref={chartRef} style={{ width: "100%", height: "100%" }}></div>;
};
export default LeftBottom;
